<template>
  <div class="repin" @click="sendRequest" >
    <tt-icon
      type="favorite_line"
      size="18"
      :color="isRepinned ? '#ffbd1d' : '#cacaca'"
    ></tt-icon><span>收藏</span>
  </div>
</template>
<script>
  import reqwest from 'reqwest';
  import Cookies from 'js-cookie';
  import checkLogin from '../../../src/js/user';

  export default {
    name: 'Star',
    props: {
      repin: {
        type: Number,
        required: true
      },
      groupId: {
        required: true
      },
      itemId: {
        required: true
      }
    },
    data () {
      return {
        isRepinned: false
      };
    },
    created () {
      this.isRepinned = this.repin ? true : false;
    },
    methods: {
      sendRequest () {
        const self = this;
        const action = self.isRepinned ? 'unrepin' : 'repin';
        const url = `/group/${action}/`;

        const request = function () {
          reqwest({
            headers: {'X-CSRFToken': Cookies.get('csrftoken')},
            url,
            data: {
              group_id: self.groupId,
              item_id: self.itemId
            },
            method: 'post',
            success: function (rs) {
              if (rs && rs.message === 'success') {
                self.isRepinned = !self.isRepinned;
              }
            }
          });
        };

        checkLogin({
          successCb: function () {
            request();
          }
        });
      }
    }
  };
</script>
<style lang="less">
  @import "./star.less";
</style>


// WEBPACK FOOTER //
// star.vue?5ccf6b34
